<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
    isPay: Boolean,
  },
});
</script>

<template>
  <view class="live-item">
    <view style="display: flex; align-items: flex-start">
      <image
        class="live-item-avatar"
        :src="info.lecturer_pic"
        mode="aspectFill"
      />
      <view class="live-item-content">
        <view class="live-item-name">{{ info.name }}</view>
        <view class="live-item-guider">
          {{ info.lecturer_name }}
          <text style="color: #999999">｜{{ info.one_word }}</text>
        </view>
        <view style="display: flex">
          <view class="live-item-tag" v-for="(i, d) of info.tag_arr" :key="d">
            {{ i }}
          </view>
        </view>
      </view>
    </view>
    <view style="display: flex">
      <template v-if="info.live_state === 0 && info.start_state === 1">
        <view class="live-item-date">距直播开始</view>
        <view class="live-item-date3">{{ info.start_time_arr[0] }}</view>
        <view class="live-item-date4">:</view>
        <view class="live-item-date3">{{ info.start_time_arr[1] }}</view>
        <view class="live-item-date4">:</view>
        <view class="live-item-date3">{{ info.start_time_arr[2] }}</view>
      </template>
      <template v-else>
        <view class="live-item-date">直播时间</view>
        <view class="live-item-date2">{{ info.start_time_str }}</view>
      </template>
    </view>
    <view class="live-item-num">{{ info.sold_count_str }}</view>
    <template v-if="info.live_state === 2">
      <!-- 已结束 -->
      <template v-if="info.is_can_playback === 1">
        <view class="live-item-state" v-if="info.type === 4">
          {{ isPay ? "查看回放" : "VIP免费" }}
        </view>
        <template v-else-if="info.type === 3">
          <view class="live-item-state" v-if="isPay">查看回放</view>
          <view class="live-item-price" v-else>
            <text class="live-item-price2">¥</text>{{ info.price
            }}<text class="live-item-price3">起</text>
          </view>
        </template>
        <view class="live-item-state" v-else>查看回放</view>
      </template>
      <view class="live-item-state2" v-else>已结束</view>
    </template>
    <template v-else>
      <template v-if="info.type === 4">
        <view class="live-item-state3" v-if="isPay">等待开播</view>
        <view class="live-item-price" v-else>VIP免费</view>
      </template>
      <template v-else-if="info.type === 3">
        <view class="live-item-state3" v-if="isPay">等待开播</view>
        <view class="live-item-price" v-else>
          <text class="live-item-price2">¥</text>{{ info.price
          }}<text class="live-item-price3">起</text>
        </view>
      </template>
      <view class="live-item-state" v-else>
        {{ info.type === 1 ? "免费" : "公益直播" }}
      </view>
    </template>
  </view>
</template>

<style lang="scss">
.live-item {
  position: relative;
  padding: 20rpx 20rpx 30rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .live-item-avatar {
    flex-shrink: 0;
    width: 136rpx;
    height: 176rpx;
    margin-bottom: 16rpx;
    border-radius: 20rpx;
  }

  .live-item-content {
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
  }

  .live-item-name {
    margin-bottom: 14rpx;
    font-size: 30rpx;
    color: #2d2d2d;
    line-height: 42rpx;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .live-item-guider {
    margin-bottom: 16rpx;
    font-size: 24rpx;
    color: #2d2d2d;
    line-height: 34rpx;
  }

  .live-item-tag {
    padding: 0 10rpx;
    margin-right: 10rpx;
    font-size: 22rpx;
    color: #0abeab;
    line-height: 32rpx;
    border-radius: 4rpx;
    background-color: #e9fffc;
  }

  .live-item-date {
    margin-right: 10rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 38rpx;
  }

  .live-item-date2 {
    padding: 0 10rpx;
    font-size: 24rpx;
    color: #7b7c84;
    line-height: 38rpx;
    border-radius: 4rpx;
    background-color: #f8f8f8;
  }

  .live-item-date3 {
    width: 38rpx;
    font-size: 24rpx;
    color: #f56b2a;
    line-height: 38rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 4rpx;
    background-color: #fff7f3;
  }

  .live-item-date4 {
    margin: 0 10rpx;
    font-size: 24rpx;
    color: #f56b2a;
    line-height: 38rpx;
  }

  .live-item-num {
    position: absolute;
    right: 40rpx;
    bottom: 88rpx;
    font-size: 22rpx;
    color: #b7b7b7;
    line-height: 32rpx;
  }

  .live-item-state,
  .live-item-state2 {
    position: absolute;
    right: 24rpx;
    bottom: 20rpx;
    width: 168rpx;
    padding-left: 10rpx;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 60rpx;
    text-align: center;
    font-weight: bold;
    border-radius: 40rpx 12rpx 12rpx 12rpx;
    background: linear-gradient(206deg, #fe810a 0%, #faa360 100%);
  }

  .live-item-state2 {
    background-color: #cccccc;
  }

  .live-item-price {
    position: absolute;
    right: 50rpx;
    bottom: 24rpx;
    font-size: 36rpx;
    color: #fa6400;
    line-height: 50rpx;
    font-weight: bold;
  }

  .live-item-price2 {
    font-size: 24rpx;
    line-height: 34rpx;
  }

  .live-item-price3 {
    font-size: 20rpx;
    color: #666666;
    line-height: 28rpx;
    font-weight: 400;
  }

  .live-item-state3 {
    position: absolute;
    right: 48rpx;
    bottom: 30rpx;
    font-size: 28rpx;
    color: #fa6400;
    line-height: 40rpx;
    font-weight: bold;
  }
}
</style>